<template>
  <div class="vditor-wrap" :style="wrapStyle">
    <div class="vditor" ref="vidtorRef" :style="wrapStyle"></div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, shallowRef } from 'vue'
import Vditor from 'vditor'
// import cookies from '@/utils/util.cookies'
// import { ACCESS_TOKEN } from '@/config/token-const'
// import { Message } from 'bin-ui-design'
import 'vditor/dist/index.css'

defineOptions({ name: 'MdEditor' })

const emit = defineEmits(['input', 'blur'])

const props = defineProps({
  height: {
    type: Number,
    default: 500,
  },
  previewURL: {
    type: String,
    default: '',
  },
  toolbar: {
    type: Array,
    default: () => [
      'emoji',
      'headings',
      'bold',
      'italic',
      'strike',
      'link',
      '|',
      'list',
      'ordered-list',
      'check',
      'outdent',
      'indent',
      '|',
      'quote',
      'line',
      'code',
      'inline-code',
      'insert-before',
      'insert-after',
      '|',
      // 'upload',
      // 'record',
      'table',
      '|',
      'undo',
      'redo',
      '|',
      // 'fullscreen',
      'edit-mode',
      {
        name: 'more',
        toolbar: [
          'both',
          'code-theme',
          'content-theme',
          'export',
          'outline',
          'preview',
          'devtools',
          // 'info',
          'help',
        ],
      },
    ],
  },
  emoji: {
    type: Object,
    default: () => ({
      '+1': '👍',
      '-1': '👎',
      confused: '😕',
      eyes: '👀️',
      heart: '❤️',
      rocket: '🚀️',
      smile: '😄',
      tada: '🎉️',
    }),
  },
  icon: {
    type: String,
    default: 'ant',
    validator: value => ['ant', 'material'].includes(value),
  },
  mode: {
    type: String,
    default: 'wysiwyg',
    validator: value => ['wysiwyg', 'ir', 'sv'].includes(value),
  },
  placeholder: {
    type: String,
    default: '',
  },
  previewCfg: {
    type: Object,
    default: () => ({}),
  },
})

const contentValue = defineModel({ type: String, default: '' })

const vidtorRef = ref(null)
const contentEditor = shallowRef(null)
const rendered = ref(false)

const wrapStyle = computed(() => {
  return {
    height: props.height + 'px',
  }
})

function init() {
  // let baseURL = process.env.NODE_ENV === 'production' ? '' : import.meta.env.VITE_APP_BASE_API

  contentEditor.value = new Vditor(vidtorRef.value, {
    height: props.height,
    toolbar: [
      ...props.toolbar,
      '|',
      {
        //自定义上传
        hotkey: '',
        name: 'upload',
        tip: '上传图片',
        icon: '<svg style="width:20px;height:20px;position:relative;top:-2px;left:-1px" t="1742351095684" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2768" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M896 160H128c-17.67 0-32 14.33-32 32v640c0 17.67 14.33 32 32 32h768c17.67 0 32-14.33 32-32V192c0-17.67-14.33-32-32-32z m-32 64v472.01l-227.2-170.4c-16.97-12.72-40.62-12.72-57.59 0l-98.58 73.92L349.2 494.39c-16.47-13.19-39.27-14.19-56.81-2.39L160 581.02V224h704zM160 800V658.16l158.36-106.48 161.02 128.8L608 584l256 192v24H160z" fill="" p-id="2769"></path><path d="M704 480c52.94 0 96-43.06 96-96s-43.06-96-96-96-96 43.06-96 96 43.06 96 96 96z m0-128c17.64 0 32 14.36 32 32s-14.36 32-32 32-32-14.36-32-32 14.36-32 32-32z" p-id="2770"></path></svg>',
        className: 'right',
      },
      // 自定义清空内容的菜单
      {
        hotkey: '',
        name: 'clearAll',
        tipPosition: 'n',
        tip: '清空内容',
        className: 'right',
        icon: '<svg style="width:18px;height:18px;position:relative;top:-2px;left:-1px" t="1742351258033" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3921" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M901.3 504.8l-76.3-150c-13.4-26.3-40-42.6-69.5-42.6H639c-1.1 0-2-0.9-2-2V120.6c0-31.1-25.3-56.3-56.3-56.3h-90c-31.1 0-56.3 25.3-56.3 56.3v189.6c0 1.1-0.9 2-2 2H315.8c-29.5 0-56.1 16.3-69.5 42.6l-76.3 150c-9.2 18.1-8.4 39.3 2.2 56.6 10.3 16.8 27.9 27 47.4 27.6-4.8 101-38.3 205.9-90.2 279.5-12.5 17.8-14.1 40.8-4.1 60.1 10 19.3 29.7 31.3 51.5 31.3h601.5c35 0 66-23.6 75.2-57.4 15.5-56.5 28.4-107.9 29.4-164.9C884 685 874 636 852.9 589c19-1.1 36.1-11.2 46.2-27.6 10.6-17.3 11.4-38.5 2.2-56.6z m-681.4 25.4l76.3-150c3.8-7.4 11.3-12 19.6-12h116.4c32 0 58-26 58-58V120.6c0-0.1 0.2-0.3 0.3-0.3h90c0.1 0 0.3 0.2 0.3 0.3v189.6c0 32 26 58 58 58h116.4c8.3 0 15.8 4.6 19.6 12l76.3 150c0.2 0.3 0.5 1-0.1 2s-1.3 1-1.7 1H221.7c-0.4 0-1.1 0-1.7-1-0.6-1-0.3-1.7-0.1-2zM827 736.6c-0.9 50.5-12.9 98.3-27.4 151.1-2.6 9.5-11.3 16.2-21.2 16.2H651.8c11.3-22.3 18.5-44 23.1-61.2 7.1-26.7 10.7-53.5 10.6-78-0.1-17.1-15.5-30.1-32.4-27.4-13.6 2.2-23.6 14-23.6 27.8 0.1 42.7-14.1 98.2-42.7 138.8H406.2c15.2-21.7 26.1-43.8 33.6-61.9 10-24.3 17.4-49.7 21.2-72.5 2.8-17-10.4-32.5-27.6-32.5-13.6 0-25.3 9.8-27.6 23.3-2.8 16.6-8.3 37.7-17.7 60.4-10.1 24.6-27.8 58.1-55.6 83.3H176.9c-0.5 0-1.2 0-1.8-1.1-0.6-1.1-0.2-1.6 0.1-2 29.7-42.1 54.8-94.5 72.5-151.4 16.2-52.1 25.7-106.9 28-160.3h514.6C816 635.6 828 684 827 736.6z" fill="" p-id="3922"></path></svg>',
        click() {
          contentEditor.value.setValue('')
        },
      },
    ],
    toolbarConfig: {
      pin: true,
    },
    hint: {
      emoji: props.emoji,
    },
    cache: {
      enable: false,
    },
    cdn: '/vditor',
    placeholder: props.placeholder,
    icon: props.icon,
    mode: props.mode,
    preview: {
      delay: 800,
      maxWidth: 800,
      mode: 'both',
      ...props.previewCfg,
    },
    // upload: {
    //   accept: 'image/*',
    //   fieldName: 'file',
    //   url: baseURL + '/comAnnexConfig/create',
    //   linkToImgUrl: baseURL + '/comAnnexConfig/create',
    //   headers: {
    //     Authorization:
    //       'Bearer ' + cookies.get(ACCESS_TOKEN) || localStorage.getItem('ThirdParty-Token'), // 用户身份信息
    //   },
    //   multiple: false,
    //   extraData: {
    //     annexType: 'IMAGE',
    //     createBy: '',
    //     sysType: 'kb',
    //   }, // 要携带的额外的formData参数
    //   validate(files) {
    //     const isLt2M = files[0].size / 1024 / 1024 < 10
    //     if (!isLt2M) {
    //       Message.error('上传图片大小不能超过 10MB!')
    //       return false
    //     }
    //     if (!files[0].type.includes('image')) {
    //       Message.error('仅支持上传图片！')
    //       return false
    //     }
    //     return true
    //   },
    //   format(files, responseText) {
    //     let res = JSON.parse(responseText)
    //     if (res.code !== '00') return
    //     return JSON.stringify({
    //       msg: '',
    //       code: 0,
    //       data: {
    //         errFiles: [],
    //         succMap: {
    //           [res.data.annexName]: res.data.annexImg,
    //         },
    //       },
    //     })
    //   },
    // },
    input: value => {
      // console.log('input =====>', value)
      emit('input', value)
      contentValue.value = value
    },
    blur: value => {
      emit('blur', value)
      contentValue.value = value
    },
    after: () => {
      rendered.value = true
      setValue(contentValue.value)
    },
  })
}

function setValue(value) {
  contentEditor.value?.setValue(value)
}

function getValue() {
  return contentEditor.value?.getValue()
}

function insertValue(value) {
  contentEditor.value?.insertValue(value)
}

onMounted(() => {
  init()
})

defineExpose({
  setValue,
  getValue,
  insertValue,
})
</script>

<style scoped>
.vditor-wrap {
  background-color: #fff;
  :deep(.vditor) {
    height: 100%;
    border-radius: 4px;
    --border-color: var(--bin-border-color-base);
    --toolbar-background-color: #fafafa;
    /* .vditor-toolbar--pin {
      padding-left: 10px !important;
    } */
    .vditor-reset {
      &:focus {
        outline: none;
        background-color: transparent;
      }
    }
  }
}
</style>
